/**
 * 主题变量定义
 * @author Wu.Liang
 * @date 2025-01-21
 */

// 主色调
$primary-color: #2d8cf0;
$primary-color-light: #5cadff;
$primary-color-dark: #2b85e4;

// 功能色
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$info-color: #1890ff;

// 文字颜色
$text-color: #262626;
$text-color-secondary: #8c8c8c;
$text-color-disabled: #bfbfbf;
$text-color-inverse: #ffffff;

// 背景颜色
$background-color: #f5f5f5;
$background-color-light: #fafafa;
$card-background: #ffffff;
$modal-background: rgba(0, 0, 0, 0.45);

// 边框颜色
$border-color: #e8e8e8;
$border-color-light: #f0f0f0;
$border-color-dark: #d9d9d9;

// 阴影
$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
$box-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.08);
$box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.15);

// 字体
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-size-base: 14px;
$font-size-sm: 12px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-xxl: 20px;

// 行高
$line-height-base: 1.5;
$line-height-sm: 1.2;
$line-height-lg: 1.8;

// 字重
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 圆角
$border-radius-base: 6px;
$border-radius-sm: 4px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-round: 50%;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;

// 组件尺寸
$component-height-sm: 24px;
$component-height-base: 32px;
$component-height-lg: 40px;
$component-height-xl: 48px;

// 动画时长
$animation-duration-fast: 0.15s;
$animation-duration-base: 0.3s;
$animation-duration-slow: 0.5s;

// 动画缓动函数
$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);

// 断点
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1600px;

// Z-index层级
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// 状态颜色
$state-colors: (
  'primary': $primary-color,
  'success': $success-color,
  'warning': $warning-color,
  'error': $error-color,
  'info': $info-color
);

// 状态背景色
$state-bg-colors: (
  'primary': rgba($primary-color, 0.1),
  'success': rgba($success-color, 0.1),
  'warning': rgba($warning-color, 0.1),
  'error': rgba($error-color, 0.1),
  'info': rgba($info-color, 0.1)
);

// 状态边框色
$state-border-colors: (
  'primary': rgba($primary-color, 0.2),
  'success': rgba($success-color, 0.2),
  'warning': rgba($warning-color, 0.2),
  'error': rgba($error-color, 0.2),
  'info': rgba($info-color, 0.2)
);

// 主题映射
$theme-colors: (
  'primary': $primary-color,
  'secondary': $text-color-secondary,
  'success': $success-color,
  'warning': $warning-color,
  'danger': $error-color,
  'info': $info-color,
  'light': $background-color-light,
  'dark': $text-color
);

// 响应式混入
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $breakpoint-xs) { @content; }
  } @else if $breakpoint == sm {
    @media (min-width: $breakpoint-sm) { @content; }
  } @else if $breakpoint == md {
    @media (min-width: $breakpoint-md) { @content; }
  } @else if $breakpoint == lg {
    @media (min-width: $breakpoint-lg) { @content; }
  } @else if $breakpoint == xl {
    @media (min-width: $breakpoint-xl) { @content; }
  } @else if $breakpoint == xxl {
    @media (min-width: $breakpoint-xxl) { @content; }
  }
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 文本省略
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本省略
@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 居中
@mixin center($type: 'both') {
  @if $type == 'both' {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if $type == 'horizontal' {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  } @else if $type == 'vertical' {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

// Flex居中
@mixin flex-center($direction: 'row') {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

// 渐变背景
@mixin gradient($direction: 'to right', $start-color: $primary-color, $end-color: $primary-color-light) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 阴影
@mixin box-shadow($level: 'base') {
  @if $level == 'light' {
    box-shadow: $box-shadow-light;
  } @else if $level == 'base' {
    box-shadow: $box-shadow;
  } @else if $level == 'dark' {
    box-shadow: $box-shadow-dark;
  }
}

// 过渡动画
@mixin transition($properties: 'all', $duration: $animation-duration-base, $timing: $ease-in-out) {
  transition: $properties $duration $timing;
}

// 按钮基础样式
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-lg;
  border: none;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  text-decoration: none;
  cursor: pointer;
  @include transition();
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// 输入框基础样式
@mixin input-base {
  width: 100%;
  padding: $spacing-sm $spacing-md;
  border: 1px solid $border-color;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  color: $text-color;
  background-color: $card-background;
  @include transition('border-color');
  
  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
  }
  
  &:disabled {
    background-color: $background-color;
    color: $text-color-disabled;
    cursor: not-allowed;
  }
}

// 卡片基础样式
@mixin card-base {
  background-color: $card-background;
  border-radius: $border-radius-lg;
  @include box-shadow();
  padding: $spacing-lg;
  margin-bottom: $spacing-lg;
}

// 工具函数
@function theme-color($key) {
  @return map-get($theme-colors, $key);
}

@function state-color($key) {
  @return map-get($state-colors, $key);
}

@function state-bg-color($key) {
  @return map-get($state-bg-colors, $key);
}

@function state-border-color($key) {
  @return map-get($state-border-colors, $key);
} 